<template>
    <div>
        首页
        <!-- 使用声明式导航跳转 -->

        <!-- <ul>
            <li v-for="item in prolist" :key="item.id"> -->
        <!--第一种传参: 声明式导航传参: :to="`/detail?id=${item.id}`"  查询字符串方式-->
        <!-- <router-link :to="`/detail?id=${item.id}&a=100`">
                    {{ item.proname }}--{{ item.price }}
                </router-link> -->
        <!-- 第二种传参: 使用对象形式 path+query -->
        <!-- <router-link :to="{ path: '/detail', query: { id: item.id, name: '张三' } }">
                    {{ item.proname }}--{{ item.price }}
                </router-link> -->
        <!-- 第三种方式:  使用对象 name+params(router@4不在支持,但是router@3支持))-->
        <!-- <router-link :to="{ name: 'detail' }">
                    {{ item.proname }}--{{ item.price }}
                </router-link> -->
        <!-- 第四种方式: 使用动态路由形式 需要配合修改路由映射表 -->
        <!-- <router-link :to="`/detail/${item.id}/${100}`">
                    {{ item.proname }}--{{ item.price }}
                </router-link> -->
        <!-- </li>
        </ul> -->

        <!-- 使用编程式导航跳转页面 -->
        <ul>
            <li v-for="item in prolist" :key="item.id" @click="gotodetailFn(item)"> {{ item.proname }}--{{ item.price }}
            </li>
        </ul>
    </div>
</template>
<script>
// import router from '@/router'
export default {
    data() {
        return {
            prolist: [
                {
                    id: 1,
                    proname: '秋裤',
                    price: 50,
                },
                {
                    id: 2,
                    proname: '秋衣',
                    price: 100,
                },
                {
                    id: 3,
                    proname: '保暖裤',
                    price: 150
                },
                {
                    id: 4,
                    proname: '保暖背心',
                    price: 80
                }
            ]
        }
    },
    methods: {
        gotodetailFn(item) {
            // 跳转到详情页
            // console.log(this.$router);
            // console.log(router);
            // 01: 查询字符串方式
            // this.$router.push('/detail?id=' + item.id)
            // 02: path+query
            // this.$router.push({
            //     path: '/detail',
            //     query: { id: item.id }
            // })
            // 03: name+params
            // this.$router.push({
            //     name: 'detail',
            //     params: { id: item.id }
            // })

            // 04: 动态路由需要修改路由表
            this.$router.push(`/detail/${item.id}`)

        }
    }
}
</script>
<style scoped></style>